<template>
  <div class="counte">
    <div class="title_bread"><span>博客</span> <span>/ Me Blog</span></div>
    <div class="counte_content">
      <template v-for="item in this.blogList">
        <ul>
          <li>
            <a :href="item.url" target="_blank">{{ item.title }}</a>
          </li>
          <li>个人博客</li>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
export default {
  name: "Wantsay",
  setup() {
    const blogList = reactive([
      {
        title: "“ 前端视频截图的方法canvas.drawImage() ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/123685194",
      },
      {
        title: "“ vue3组件封装之搜索组件的封装 ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/123255128",
      },
      {
        title: "“ vue中使用videojs ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/122621532",
      },
      {
        title: "“ Vue3传送组件Teleport ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/122446760",
      },
      {
        title: "“ Vue3中Snspense异步组件的使用 ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/122446068",
      },
      {
        title: "“ JSON.stringify()的三个参数 ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/123568258",
      },
      {
        title: "“ vue中使用hover.css动画 ”",
        url: "https://blog.csdn.net/weixin_43723051/article/details/122697419",
      },
    ]);
    onMounted(() => {});
    return { blogList };
  },
};
</script>
<style scoped>
.counte_content {
  color: #fff;
}
.counte_content ul {
  background-color: #000;
  margin-top: 20px;
  border-radius: 16px;
  padding: 30px 20px;
}
ul li:nth-child(2) {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  color: #949494;
  font-size: 13px;
  margin-left: 10px;
  margin-top: 10px;
}
ul li:nth-child(1) a {
  color: rgb(241, 241, 241);
}
ul li:nth-child(1) a:hover {
  color: #f23051;
}
</style>
